import * as THREE from 'three'
import { OrbitControls } from '../build/OrbitControls.js'
// 引入性能监视器
import Stats from '../build/stats.module.js'
// 创建Stats对象
const stats = new Stats()
document.body.appendChild(stats.domElement)

// console.log(window.devicePixelRatio)


// 创建一个三维场景
const scene = new THREE.Scene();

const geometry = new THREE.SphereGeometry(100);
const material = new THREE.MeshPhongMaterial({
  // const material = new THREE.MeshLambertMaterial({
  color: 0x00ff66, // 设置材质颜色
  // transparent: true, // 开启透明度
  // opacity: 0.5 // 透明程度
  // shininess: 30
})

const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);


// 创建一个三位坐标轴
const axesHelper = new THREE.AxesHelper(120);
// 坐标轴添加到场景中
scene.add(axesHelper);


/**
 * 光源设置
 */
// 创建一个点光源对象
const pointLight = new THREE.PointLight(0xffffff);
// pointLight.intensity = 1.0;
pointLight.decay = 0.0 // 不会衰减
pointLight.position.set(200, 200, 80)
// pointLight.position.set(-300, -150, -200)
scene.add(pointLight)
// 可视化点光源
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

// 添加环境光
const ambient = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambient)

// 添加一个平行光
// const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
// directionalLight.position.set(400, 400, 80)
// // directionalLight.target = mesh // 不设置是坐标原点
// scene.add(directionalLight)
// // 可视化平行光
// const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 10, 0xffff00);
// scene.add(dirLightHelper);



// width和height用来设置canvas画布尺寸
const width = window.innerWidth;
const height = window.innerHeight;
// const width = 800;
// const height = 500;

// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
// 设置相机的位置
camera.position.set(300, 300, 300)
// 相机的视线 观察目标点坐标
camera.lookAt(0, 0, 0) //坐标原点


// 创建一个webGL渲染器
const renderer = new THREE.WebGLRenderer({
  // 启动抗锯齿，默认为false
  // antialias: true
});
renderer.setSize(width, height); // canvas画布宽高
// 获取屏幕像素比告诉three.js避免canvas渲染模糊
// renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0x444444, 1);

renderer.render(scene, camera);
// 把渲染结果canvas画布添加到页面上。
document.body.appendChild(renderer.domElement);


// 创建相机控件
const controls = new OrbitControls(camera, renderer.domElement)
// 相机控件target表示相机目标点，默认为0,0,0
controls.target.set(150, 0, 150);
// 内部会执行camera.lookAt(controls.target)
controls.update();
controls.addEventListener('change', function () {
  // 监听变化了，重新渲染
  stats.update();
  renderer.render(scene, camera);
})

window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 全屏下设置观察范围长宽比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix方法更新。
  camera.updateProjectionMatrix()
  renderer.render(scene, camera);
}



